<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
		<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">商品详情</view>
				<view class="return"></view>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper_wrap">
			<swiper class="swiper" :current='comCurrentImg' @change='changCurrent'>
				<swiper-item  v-for="(item,index) in goods_info.images" :key="index">
					<view class="swiper-item">
						<image :src="Config_ysy.cosurl + item" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="imgLength">{{(comCurrentImg+1)+'/'+(goods_info.images.length)}}</view>
		</view>
		
		<view class="goods_wrap">
			<view class="goods_box">
				<view class="goods_name">{{goods_info.name}}</view>
				<view class="goods_price"><text>￥</text>{{goods_info.price}}</view>
				<view class="wrap_bottom">
					<view class="tuijian">
						<view class="icon">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/biaoqian.png"></image>
						</view>
						<view class="name">推荐</view>
						<view class="num">{{goods_info.recommend_quantity}}</view>
					</view>
					<view class="xihuan">
						<view class="icon">
							<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/xihuan.png"></image>
						</view>
						<view class="name">喜欢人数</view>
						<view class="num">{{goods_info.collect_quantity}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong"></view>
		
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="choose_tab">
				<view :class="currentIndex == index?'choose_active':'choose_item'" v-for="(item,index) in choose_item" :key="index" @click="chooseItem(index)">
					<view class="choose_name">{{item.choose_name}}</view>
				</view>
			</view>
			
			<!-- 内容 -->
			<view class="goods_canshu" v-if="currentIndex == 1">
				<view class="canshu_wrap">
					<view class="canshu_item" v-for="(value,key,index) in goods_info.attrjson" :key='index'>
						<view class="canshu_name">{{key}}</view>
						<view class="canshu_detail">{{value}}</view>
					</view>
				</view>
			</view>
			<view class="goods_xiangqing" v-if="currentIndex == 0">
				<rich-text :nodes="goods_info.content"></rich-text>
			</view>
			<view class="goods_pinglun" v-if="currentIndex == 2">
				<view class="comments">
					<view class="comments_item" v-for="(item,index) in comments" :key="index">
						<view class="comments_box">
							<view class="photo">
								<image :src="item.img"></image>
							</view>
							<view class="comments_name">
								<view class="name">{{item.comments_name}}</view>
								<view class="comments_time">
									<view class="time">{{item.time}}</view>
									<view class="editor">编辑</view>
								</view>
							</view>
						</view>
						<view class="comments_content">{{item.comments_content}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom_bar">
			<view class="share">
				<view class="icon_img">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/fenxiang.png"></image>
				</view>
				<button class="button" open-type="share"></button>
			</view>
			<view class="gouwuche" @click="go_cart">
				<view class="icon_img">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/gouwuche.png"></image>
				</view>
			</view>
			<view class="button_wrap">
				<view class="btn_box">
					<view class="btn_left">
						<view class="btn" @click="add_cart">
							加入购物车
						</view>
					</view>
					<view class="btn_right">
						<view class="btn" @click="add_order">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 上拉属性选择层 -->
		<min-pop :show="show_pop" @close="close"></min-pop>
	</view>
</template>

<script>
	 import minPop from '../../components/min-popup/min-popup.vue'
	export default {
		components: { minPop }, 
		data() {
			return {
				good_id:null,
				show_pop:false,
				currentIndex:1,
				comCurrentImg:0,
				token:'',
				goods_info:{
					images:[],
				},
				goodsdetail:{
					goods_name:'华海威POS机',
					goods_price:'243-356',
					tj_num:19,
					xh_num:25
				},
				choose_item:[
					{
						choose_name:'详情'
					},
					{
						choose_name:'参数'
					},
					// {
					// 	choose_name:'评论'
					// }
				],
				comments:[
					{
						id:1,
						comments_name:'菲菲',
						time:'2020年4月22日',
						img:'../../static/course/13.png',
						comments_content:'小白一枚，越往后听，越听不明白，但是经过昨晚的直播，觉得越是这个时候越不能放弃，重新拾起笔，打开笔记本，一边跟随老师的脚步，一边重头再来，年底给自己一份满意的答卷'
					},{
						id:2,
						comments_name:'菲菲',
						time:'2020年4月22日',
						img:'../../static/course/13.png',
						comments_content:'小白一枚，越往后听，越听不明白，但是经过昨晚的直播，觉得越是这个时候越不能放弃，重新拾起笔，打开笔记本，一边跟随老师的脚步，一边重头再来，年底给自己一份满意的答卷'
					},{
						id:3,
						comments_name:'菲菲',
						time:'2020年4月22日',
						img:'../../static/course/13.png',
						comments_content:'小白一枚，越往后听，越听不明白，但是经过昨晚的直播，觉得越是这个时候越不能放弃，重新拾起笔，打开笔记本，一边跟随老师的脚步，一边重头再来，年底给自己一份满意的答卷'
					}
				],
				canshu:[
					{
						canshu_name:'Pos机品牌',
						canshu_detail:'瑞刷、瑞银信、瑞和'
					},{
						canshu_name:'Pos机品牌',
						canshu_detail:'瑞刷、瑞银信、瑞和'
					},{
						canshu_name:'Pos机品牌',
						canshu_detail:'瑞刷、瑞银信、瑞和'
					},{
						canshu_name:'Pos机品牌',
						canshu_detail:'瑞刷、瑞银信、瑞和'
					}
				]
			}
		},
		onShow() {
			//获取商品详情
			var option = this.Unfold_data.getCurPageOption();
			this.good_id = option.id;
			let fumao = this.Unfold_data.getUserQuanyi("fumao_rank");
			if(this.good_id==18&&fumao>0){
				this.Unfold_data.showWindow("您已经是富猫会员，无需重复购买");
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				},2000) 
			}
			var url1 = '/api/cshop/posgoods/details';
			let params = {
				goods_id: this.good_id,
				token:this.token
			};
			this.Unfold_data.upload_data(params, 'POST', url1, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
					this.goods_info = res.data.data;
					var richtext = this.goods_info.content;
					const regex = new RegExp('<img', 'gi');
					richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
					this.goods_info.content = richtext;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		onLoad(option) {
			this.token=option.token
		},
		methods: {
			//返回
			returnPage(){
			    uni.navigateBack({
					delta:1
			    })
			},
			//去购物车
			go_cart(){
				uni.navigateTo({
					url:'/pages/cart/cart?token='+this.token
				})
			},
			//tab切换
			changCurrent(e){
				this.comCurrentImg = e.target.current
			},
			//选中状态
			chooseItem(index){
				this.currentIndex = index;
			},
			// 关闭事件
			// close(){
			//     this.show_pop = false
			// },
			// 打开事件             
			// showPop(){
			//     this.show_pop = true
			// },
			//添加购物车
			add_cart(){
				// POST/api/cshop/posshoppingtrolley/add
				var url1 = '/api/cshop/posshoppingtrolley/add';
				let params = {
					pos_id: this.good_id,
					quantity:1,
					token:this.token
				};
				this.Unfold_data.upload_data(params, 'POST', url1, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						uni.navigateTo({
							url:'/pages/cart/cart?token='+this.token
						})
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			//跳转创建订单页
			add_order(){
				
				sui.navigateTo({
					url: `/pages/payOrder/payOrder?id=`+this.goods_info.id+`&num=1`+'&token='+this.token
				});
			}
			
		}
	}
</script>

<style lang="scss">
.top_nav{
	width: 100%;
	height: 200upx;
	background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
	background-size: cover;
	position: fixed;
	top: -20upx;
	left: 0;
	z-index: 10;
	.kong{
		width: 100%;
		height: 60upx;
	}
	.tab_item{
		width: 90%;
		margin: 0 auto;
		height: 140upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		.return{
			flex: 1;
			width: 100%;
			image{
				width: 29upx;
				height: 29upx;
			}
		}
		.title{
			flex: 8;
			width: 100%;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
		}
	}
}
	
.content{
	width: 100%;
	padding-bottom: 120upx;
	position: relative;
	.swiper_wrap{
		width: 100%;
		height: 742upx;
		margin-top: 180upx;
		.swiper{
			width: 100%;
			height: 742upx;
			.swiper-item{
				image{
					width: 750upx;
					height: 742upx;
				}
			}
		}
		.imgLength{
			position: absolute;
			top: 694rpx;
			right: 24rpx;
			background:rgba(0,0,0,0.34);
			padding: 0 12rpx;
			line-height: 32rpx;
			font-size: 22rpx;
			border-radius: 16rpx;
			color: #fff;
		}
	}
	.goods_wrap{
		width: 100%;
		height: 100%;
		background: #ffffff;
		padding: 20upx 0;
		.goods_box{
			width: 90%;
			margin: 0 auto;
			.goods_name{
				font-size: 38upx;
				font-weight: bold;
			}
			.goods_price{
				width: 100%;
				text-align: right;
				font-size: 38upx;
				font-weight: bold;
				color: #ed2223;
				padding: 10upx 0;
				text{
					font-size: 26upx;
				}
			}
			.wrap_bottom{
				display: flex;
				align-items: center;
				color: #949494;
				padding-top: 10upx;
				.tuijian{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						image{
							width: 31upx;
							height: 31upx;
						}
					}
					.name{
						padding: 0 20upx;
					}
					.num{
						
					}
				}
				.xihuan{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						image{
							width: 26upx;
							height: 24upx;
						}
					}
					.name{
						padding: 0 20upx;
					}
					.num{
						
					}
				}
			}
		}
	}
	.kong{
		width: 100%;
		height: 20upx;
		background: #f2f2f2;
	}
	.goods_detail{
		width: 100%;
		margin-bottom: 100upx;
		.choose_tab{
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.choose_item{
				flex: 1;
				width: 100%;
				height: 100upx;
				background: #e5e5e5;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.choose_active{
				flex: 1;
				width: 100%;
				height: 100upx;
				background: #f6b37f;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.choose_name{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100upx;
					border-bottom: 10upx solid  #e85c38;
				}
			}
		}
		.goods_canshu{
			width: 95%;
			margin: 0 auto;
			.canshu_wrap{
				width: 90%;
				margin: 0 auto;
				.canshu_item{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 5upx 0;
					.canshu_name{
						flex: 3;
					}
					.canshu_detail{
						flex: 7;
					}
				}
			}
		}
		.goods_xiangqing{
			width: 95%;
			margin: 0 auto;
		}
		.goods_pinglun{
			width: 100%;
			.comments{
				width:100%;
				margin: 20rpx 0;
				color:#282828;
				.comments_item{
					width: 80%;
					margin: 0 auto;
					padding: 20rpx 0;
					.comments_box{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.photo{
							flex: 1;
							image{
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}
						.comments_name{
							flex: 6;
							.name{
								font-size: 26rpx;
							}
							.comments_time{
								display: flex;
								align-items: center;
								font-size: 26rpx;
								color: #797979;
								.time{
									flex: 1;
								}
								.editor{
									flex: 1;
								}
							}
						}
					}
					.comments_content{
						margin-top: 10rpx;
						font-size: 24rpx;
						padding: 10rpx;
					}
				}
			}
		}
	}
	.bottom_bar{
		width: 100%;
		height: 120upx;
		background: #f2f2f2;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow:0 -10upx 20upx #f1e8e9;
		display: flex;
		align-items: center;
		justify-content: center;
		.share{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.icon_img{
				image{
					width: 35upx;
					height: 33upx;
				}
			}
			.button{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 100;
				opacity: 0;
			}
		}
		.gouwuche{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_img{
				image{
					width: 43upx;
					height: 41upx;
				}
			}
		}
		.button_wrap{
			flex: 7;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn_box{
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80upx;
				.btn_left{
					flex: 1;
					.btn{
						width: 100%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 34upx;
						border-radius: 40upx 0 0 40upx;
						background: #a28247;
					}
				}
				.btn_right{
					flex: 1;
					.btn{
						width: 100%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 34upx;
						color: #ffffff;
						border-radius: 0 40upx 40upx 0;
						background: #ac1327;
					}
				}
			}
		}
	}
}
</style>
